<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>中国 | 传统色</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./style/index.css" />
    <!-- <base target="_blank"> -->
    <meta
      content="一个记录中国传统色彩的网站，色彩源自：《中国传统色彩：故宫里的色彩美学》（郭浩，李健明 著），本网站按照书中二十四节气色值顺序，记录了书中共计384种中国传统颜色，包括色名，rgb，cmyk，并且补上了对应的顺序，色名拼音，16进制色号等。"
      name="description"
    />
    <meta
      content="中国色，中国传统色彩，色名，色谱，故宫里的色彩美学，郭浩，李健明"
      name="keywords"
    />
    <script src="./script/jquery-3.6.0.min.js"></script>
    <!-- <script src="./script/snowy4.js"></script> -->
    <script type="text/javascript" src="./data/chineseColor.json"></script>
  </head>

  <body>
    <!-- <div class="snow-container"></div> -->
    <div class="indicator"></div>
    <div class="navbar">
      <a href="./randerColor.html" class="enterbutton"></a>
    </div>
    <script>
      window.addEventListener("load", function () {
        console.log("初次打开视窗宽度：" + window.innerWidth);

        var newWidth = window.innerWidth;

        window.addEventListener("resize", function () {
          console.log("当前宽度：" + window.innerWidth);
        });
      });
      // 测试结束

      $.ajax({
        type: "get", //使用get方式
        url: "./data/chineseColor.json", //json文件相对于这个HTML的路径
        dataType: "json",
        success: function (data) {
          //这个data就是json数据
          var items = [];
          $.each(data, function (key, val) {
            var Hex = val.chex.toUpperCase();
            items.push(
              '<figure class = "c-item" style="background:' +
                val.chex +
                ";color:" +
                val.ForegroundColor +
                '" >' +
                "<span class = 'c-cid copy'>" +
                val.cid +
                "</span>" +
                "<span class = 'c-pinyin copy'>" +
                val.cpinyin +
                "</span>" +
                "<span class = 'c-cname copy'>" +
                val.cname +
                "</span>" +
                "<span class = 'c-chex copy'>" +
                Hex +
                "</span>" +
                "<span class = 'c-crgb copy'>" +
                val.crgb +
                "</span>" +
                "<span class = 'c-ccmyk copy'>" +
                val.ccmyk +
                "</span>" +
                "</figure>"
            );
            // console.log(Hex);
          });

          $("<ul/>", {
            class: "chinese-colors-list",
            html: items.join(""),
          }).appendTo("body");
        },
        error: function () {
          alert("请求失败");
        },
      });

      window.addEventListener("load", function () {
        //js代码
        // 获取所有具有 class 为 "copy" 的元素
        const copyElements = document.querySelectorAll(".copy"); // 为每个元素添加点击事件监听器
        copyElements.forEach((element) => {
          element.addEventListener("click", function () {
            // 获取元素的文本内容
            const text = element.innerText; // 复制文本内容到剪切板

            navigator.clipboard
              .writeText(text)
              .then(() => alert(`已将【${text}】复制到剪贴板！`))
              .catch(() => console.error("复制失败！"));
          });
        });
      });
    </script>
  </body>
</html>
